{% extends 'layouts/base.html' %}

{% block title %} 编辑配置: {{ filename }} {% endblock title %}

{% block content %}

    <!-- Page content -->
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div id="editor" class="ace_editor" style="height: 41rem;
                    min-height:inherit;border-radius: 0.375rem;"></div>
                </div>
            </div>
        </div>

        {% include "includes/footer.html" %}

    </div>

{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}


    <script src="{{ cdn_prev }}qexo-static@2.2.3/qexo/ace/ace.js"></script>
    <script src="{{ cdn_prev }}qexo-static@2.2.3/qexo/ace/ext-language_tools.js"></script>
    <script src="{{ cdn_prev }}qexo-static@2.2.3/qexo/ace/ext-modelist.js"></script>
    <script>
        var _status = true;
        var file_content = {{ file_content|safe }};

        editor = ace.edit("editor");

        if (checkIfDark()) {
            editor.setTheme("ace/theme/one_dark");
        } else {
            editor.setTheme("ace/theme/tomorrow");
        }

        let modelist = ace.require("ace/ext/modelist");
        let filePath = "blahblah/weee/some.js";
        let mode = modelist.getModeForPath("{{ filename }}").mode;
        editor.session.setMode(mode);

        editor.setFontSize(15);	//字体大小
        document.getElementById("editor").style.lineHeight = "25px";
        editor.setReadOnly(false);
        editor.setOption("wrap", "free");
        ace.require("ace/ext/language_tools");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        editor.setHighlightActiveLine(true);
        editor.setShowPrintMargin(false);
        editor.getSession().setUseWorker(false);
        editor.getSession().setUseWrapMode(true);
        editor.getSession().setUseSoftTabs(true);
        editor.setValue(file_content);
        editor.gotoLine(1);
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        });


        function Publish() {
            if (!_status) {
                return false;
            }
            var loading = new KZ_Loading('正在保存中...');
            _status = false;
            loading.show();
            $.ajax({
                url: '/api/save/',
                method: 'post',
                data: {"file": "{{ filepath }}", "content": editor.getValue()},
                dataType: 'JSON',
                success: function (res) {
                    loading.destroy();
                    if (res.status) {
                        notyf.success(res.msg);
                        file_content = editor.getValue();
                    } else {
                        notyf.error(res.msg);
                    }
                    _status = true;
                },
                error: function (res) {
                    loading.destroy();
                    notyf.error("网络错误！");
                    _status = true;
                }
            })
        }

        document.onkeydown = function () {
            // 判断 Ctrl+S
            if (event.ctrlKey === true && event.keyCode === 83) {
                Publish();
                event.preventDefault();
            }
        }

        window.onbeforeunload = function (e) {
            e = e || window.event;
            if (e && file_content !== editor.getValue()) {
                e.returnValue = '确定要离开吗?';
                return '确定要离开吗?';
            }
        }

    </script>
{% endblock javascripts %}
